import React, { memo, useEffect } from "react";

import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { Hotdjprogram } from "./style";

import { getHotDjProgram } from "../../store/actionType";

import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function HotAnchor() {
  const dispatch = useDispatch();

  const state = useSelector(
    (state) => ({
      hotDjprogramList: state.getIn(["recommend", "hotDjprograms"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    dispatch(getHotDjProgram());
  }, [dispatch]);

  // (state.hotDjprogramList)

  return (
    <Hotdjprogram>
      <div className="hot-title">推荐节目</div>
      <div className="hot-box">
        {state.hotDjprogramList.slice(0, 5).map((item, index) => {
          return (
            // program的,一会写
            <div className="hot-flex" key={item.name}>
              <NavLink
                to={{
                  pathname: "/program",
                  search: "?id=" + item.id,
                }}
              >
                <div>
                  <img src={getSizeImage(item.picUrl, 40)} alt="" />
                </div>
              </NavLink>
              <div className="hot-p">
                <p>
                  <NavLink
                    to={{
                      pathname: "/program",
                      search: "?id=" + item.id,
                    }}
                  >
                    {item.name}
                  </NavLink>
                </p>
                <p>
                  <NavLink
                    to={{
                      pathname: "/program",
                      search: "?id=" + item.id,
                    }}
                  >
                    {item.copywriter}
                  </NavLink>
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </Hotdjprogram>
  );
});
